<template>
    <div class="container">
        <!-- 用户头像 -->
        <div class="avatar-section">
            <img src="http://mms1.baidu.com/it/u=2967024946,2153063255&fm=253&app=138&f=JPEG?w=500&h=509" alt="微信头像" class="avatar" />
        </div>

        <!-- 支付成功 -->
        <div class="payment-success">
            <div>您已支付成功</div>
        </div>

        <!-- 订单编号 -->
<!--        <div class="order-number">-->
<!--            <span>订单编号: 1234567890</span>-->
<!--            <van-icon name="description-o" class="copy-icon" @click="onCopy(1234567890)"/>-->
<!--        </div>-->

        <div class="group-title">
            长按加入游戏开黑搭子VIP群
        </div>

        <!-- 提示信息 -->
        <div class="note">
            <p>频繁点击下方换二维码，耐心等待客服同意后拉群</p>
        </div>

        <!-- 二维码 -->
        <div class="qr-code-section">
            <img :src="groupInfo.qunCode || require('@/assets/group/qun-code.png')" alt="群二维码" class="qr-code" />
            <div style="font-size: 1rem; margin-top: -10px; color: #969595;">
                长按二维码扫码输入口令进群
            </div>
        </div>

        <!-- 输入口令 -->
        <div class="group-password">
            <div>
                如果扫码不成功，点击更换
            </div>
        </div>

        <!-- 入群口令 -->
        <div class="group-password">
            <span>入群口令：游戏</span>
            <van-icon name="description-o" class="copy-icon" @click="onCopy(游戏)"/>
        </div>
    </div>
</template>

<script setup>
import { showToast } from 'vant'
import {onMounted, onUnmounted, reactive, ref} from 'vue'
import { getProjectInfoApi, visitorInfo} from "@/api";
import StorageUtil from "@/utils/storage";

const isShow = ref(false)
const groupInfo = reactive({
    qunCode: ''
})

onMounted(() => {
    const projectId = StorageUtil.getProjectId()
    // 设置项目id
    if (!projectId) {
        alert('项目id不能为空')
        return
    }
    getProjectInfo(projectId)
    getVisitorInfo()
})

// 销毁
onUnmounted(() => {
    isShow.value = false
})

const getVisitorInfo = () => {
    const projectId = StorageUtil.getProjectId()
    visitorInfo().then(res => {
        isShow.value = res.projects.includes(projectId)
    })
}

const getProjectInfo = (projectId) => {
    if (projectId) {
        getProjectInfoApi(projectId).then(res => {
            groupInfo.qunCode = res.workerQrCode
        })
        // res返回格式
        // {
        // avatar: "https://wx3.sinaimg.cn/mw690/88e90961ly1hwvqdknjo4j20u0140tav.jpg"
        // id: 1
        // remark: "测试项目描述"
        // title: "测试项目"
        // workerQrCode: "https://wx3.sinaimg.cn/mw690/88e90961ly1hwvqdknjo4j20u0140tav.jpg"
        // }
    }
}

const onCopy = (code) => {
    navigator.clipboard.writeText(code).then(() => {
        showToast('订单编号已复制')
    })
}
</script>

<style scoped>
html {
    font-size: 6px; /* 将根字体大小调整为6px，字体更小 */
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background-color: #fff;
    height: 100vh;
    box-sizing: border-box;
}

.avatar {
    width: 5rem;  /* 缩小头像尺寸 */
    height: 5rem; /* 缩小头像尺寸 */
    border-radius: 10px; /* 调整头像圆角为10px */
}

.payment-success {
    font-size: 1.2rem; /* 缩小字体 */
    color: #333;
    margin-bottom: 1rem; /* 调整上下边距 */
}

.order-number {
    display: flex;
    align-items: center;
}

.order-number span {
    margin-right: 0.8rem;
    font-size: 1rem; /* 缩小字体 */
}

.copy-icon {
    font-size: 1.6rem; /* 设置图标大小 */
    cursor: pointer;  /* 设置为可点击 */
    color: #007aff;  /* 设置图标颜色 */
}

.note {
    text-align: center;
    font-size: 1rem; /* 缩小字体 */
    color: #666;
}

.qr-code {
    width: 15rem;  /* 缩小二维码尺寸 */
    height: 15rem; /* 缩小二维码尺寸 */
}

.group-password {
    display: flex;
    align-items: center;
    margin-top: 2rem;
    text-align: center;
    font-size: 1rem; /* 缩小字体 */
    color: #333;
}

.copy-icon {
    margin-left: 0.5rem;
    margin-top: -5px;
}

.van-icon-description-o:before {
    font-size: 1.3rem;
}

.group-title {
    font-size: 1.2rem; /* 缩小字体 */
    color: #333;
    margin-top: 2rem;
    margin-bottom: 1rem;
    background-color: #dddddd;
    width: 100vw;
    text-align: left;
    padding: 0.5rem;
    font-weight: bold;
}
</style>
